import React, { useRef } from 'react'
import { connect } from 'react-redux'
import { nanoid } from 'nanoid'
import { Progress, Drawer, Radio, Button, Space , Tooltip, Typography, Modal, Form, Input, Message, Card, Divider } from '@arco-design/web-react';
import { useState } from 'react';
import { IconPlus  } from '@arco-design/web-react/icon';
import './index.css'

const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;

function Footer(props) {
    const [visible, setVisible] = useState(); // 抽屉可见性
    const [addvisible, setaddVisible] = useState(false); // 对话框可见性
    const [confirmLoading, setConfirmLoading] = useState(false);
    const note = useRef();
    const [form] = Form.useForm();
    const { Text } = Typography;

    const Content = ({ children }) => {
        return (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ display: 'flex', alignItems: 'center', color: '#1D2129' }}>
            </span>
            {children}
          </div>
        );
      };

    function onOk() {
        form.validate().then((res) => {
          setConfirmLoading(true);
          setTimeout(() => {
            Message.success('添加成功！已保存至笔记');
            setaddVisible(false);
            setConfirmLoading(false);
          }, 500);
        });
        const curNote = note.current.dom.firstChild.data
        props.AddNote([curNote])
      }

    return (
        <div className='footer'>
            <Progress percent={props.readPro} width='40%' className={'percent'} />
            <Button
                shape='round'
                size='large'
                type='outline'
                onClick={() => {
                setVisible(true);
                }}
                style={{ marginTop: 8 , float:'right'}}
            >
                我的笔记
            </Button>
            <Tooltip content='点击添加笔记'>
                <Button shape='circle' type='primary' icon={<IconPlus />} onClick={() => setaddVisible(true)} style={{ marginTop: 10, marginRight: 15, float:'right'}}/>
            </Tooltip>
            <Drawer
                width={400}
                height={332}
                title={<span>我的笔记</span>}
                visible={visible}
                placement='right'
                onOk={() => {
                setVisible(false);
                }}
                onCancel={() => {
                setVisible(false);
                }}
            >
                {
                    props.notes.map(item => 
                        <div>
                        <Card className='card-with-icon-hover' hoverable style={{ width: 360 }} key={nanoid()}>
                            <Content>
                                { item }
                            </Content>
                        </Card>
                        <Divider className='half-divider' />
                        </div>
                    )
                }
            </Drawer>
            <Modal
                title='添加笔记'
                visible={addvisible}
                onOk={onOk}
                confirmLoading={confirmLoading}
                onCancel={() => setaddVisible(false)}
            >
                <Space wrap>
                    <TextArea
                    placeholder='编写您的笔记内容...'
                    style={{ minHeight: 64, width: 480 }}
                    ref={note}
                    />
                </Space>
            </Modal>
        </div>
    )
}
const mapStateToProps = ({ ReadProReducer, AddNotesReducer }) => ({
    readPro: ReadProReducer,
    notes: AddNotesReducer,
})
const mapDispatchToProps = {
    AddNote(notes) {
        return {
            type: 'addNote',
            payload: notes
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

